﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="roles.aspx.cs" Inherits="SampleSite.admin.roles" %>
<div>
    <table id="roles"></table>
</div>

<%-- 添加角色 --%>
<div id="dlgAddRole" class="easyui-dialog" style="width:320px;height:190px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="AddRole" method="post" novalidate="novalidate">
        <table>
            <tr>
                <th colspan="2" >添加角色</th>
            </tr>               
            <tr>
                <td><label for="AddR_CName">角色中文名：</label></td>
                <td><input class="easyui-validatebox" type="text" id="AddR_CName" name="R_CName" 
                            style="width:175px;"
                            data-options="required:true,validType:['chinese']" /></td>
            </tr>
            <tr>
                <td><label for="AddR_EName">角色英文名：</label></td>
                <td><input class="easyui-validatebox" type="text" id="AddR_EName" name="R_EName" 
                            style="width:175px;"
                            data-options="validType:'english'" /></td>
            </tr>
            <tr>
                <td><label for="AddR_Description">角色说明：</label></td>
                <td><input class="easyui-validatebox" type="text" id="AddR_Description" name="R_Description" 
                            style="width:175px;"
                            data-options="required:false" /></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnAddRole" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgAddRole"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
    </form>
</div>

<%-- 启用禁用 --%>
<div id="dlgUpState" class="easyui-dialog" style="width:320px;height:190px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="UpState" method="post" novalidate="novalidate">
        <input type="hidden" id="UpR_ID" name="R_ID" />
        <input type="hidden" id="UpR_State" name="R_State" />
    </form>
</div>

<%-- 修改角色 --%>
<div id="dlgUpdateRole" class="easyui-dialog" style="width:320px;height:190px;padding:10px 20px"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <form id="UpdateRole" method="post">
        <table>
            <tr>
                <th colspan="2" >修改角色</th>
            </tr>               
            <tr>
                <td><label for="UpdateR_CName">角色中文名：</label></td>
                <td><input class="easyui-validatebox" type="text" id="UpdateR_CName" name="R_CName" 
                            style="width:175px;"
                            data-options="required:true,validType:['chinese']" /></td>
            </tr>
            <tr>
                <td><label for="UpdateR_EName">角色英文名：</label></td>
                <td><input class="easyui-validatebox" type="text" id="UpdateR_EName" name="R_EName" 
                            style="width:175px;"
                            data-options="validType:'english'" /></td>
            </tr>
            <tr>
                <td><label for="UpdateR_Description">角色说明：</label></td>
                <td><input class="easyui-validatebox" type="text" id="UpdateR_Description" name="R_Description" 
                            style="width:175px;"
                            data-options="required:false" /></td>
            </tr>
            <tr>
                <td colspan="2" style="text-align:center; padding-top:10px">
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton" 
                        id="btnUpdateRole" 
                        iconcls="icon-ok" >确定</a>
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton close_dlg"
                        dlg="dlgUpdateRole"
                        iconcls="icon-cancel">关闭</a>
                </td>
            </tr>
        </table>
        <input type="hidden" name="R_ID" id="UpdateR_ID" />
    </form>
</div>

<%-- 角色职位 --%>
<div id="dlgPositions" class="easyui-dialog" style="width:600px;height:480px;padding:10px 20px;text-align:center;"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <table id="positions" style="height:390px;margin-left:auto;margin-right:auto;"></table>
    <div style="margin-top:10px;margin-left:auto;margin-right:auto;">
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            id="btnPositions" 
            iconcls="icon-ok" >确定</a>
        <a href="javascript:void(0)" 
            class="easyui-linkbutton close_dlg"
            dlg="dlgPositions"
            iconcls="icon-cancel">关闭</a>
    </div>
    <input type="hidden" name="R_ID" id="R_IDInPositions" />
</div>

<%-- 角色菜单 --%>
<div id="dlgRoleMenus" class="easyui-dialog" style="width:360px;height:400px;padding:10px 20px;text-align:center;"
		closed="true" resizable="true" modal="true" buttons="#dlg-buttons" align="center">
    <ul id="menus" style="height:300px;text-align:left;margin-left:0px;"></ul>
    <div style="margin-top:10px;margin-left:auto;margin-right:auto;">
        <a href="javascript:void(0)" 
            class="easyui-linkbutton" 
            id="btnSetRoleMenus" 
            iconcls="icon-ok" >确定</a>
        <a href="javascript:void(0)" 
            class="easyui-linkbutton close_dlg"
            dlg="dlgRoleMenus"
            iconcls="icon-cancel">关闭</a>
    </div>
    <input type="hidden" name="R_ID" id="R_IDInRoleMenus" />
    <input type="hidden" name="A_ID" id="A_IDInRoleMenus" />
</div>

<script type="text/javascript">
    var dlgAddRole = {
        clearAddRoleDialog: function () {
            $('#AddR_CName').val('');
            $('#AddR_EName').val('');
            $('#AddR_Description').val('');
        },

        showAddRoleDialog: function () {
            dlgAddRole.clearAddRoleDialog();
            $('#dlgAddRole').dialog('open');
        },

        addRole: function () {
            var validate = $('#AddRole').form('validate');
            if (validate == false) {
                return false;
            }

            $.post('/admin/ajax/addRole.ashx', $('#AddRole').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '添加成功');

                    $('#dlgAddRole').dialog('close');
                    $('#roles').datagrid('reload');
                }
                else {
                    $.messager.alert('提示', '添加失败:' + data.msg);
                }
            }, 'json');
        },

        init: function () {
            $('#btnAddRole').click(dlgAddRole.addRole);
            $('#dlgAddRole').dialog({ title: '添加角色' });
        }
    };

    var dlgUpState = {
        clearUpStateDialog: function () {
            $('#UpR_ID').val('');
            $('#UpR_State').val('');
        },

        UpStateInit: function () {
            var rows = $('#roles').datagrid('getSelections');
            $('#UpR_ID').val(rows[0].R_ID);
            $('#UpR_State').val(rows[0].R_State == '启用' ? 1 : 0);
        },

        ToUpState: function () {
            dlgUpState.clearUpStateDialog();
            dlgUpState.UpStateInit();
            dlgUpState.UpState();
        },

        UpState: function () {
            var validate = $('#UpState').form('validate');
            if (validate == false) {
                return false;
            }

            $.post('/admin/ajax/updateRoleState.ashx', $('#UpState').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '操作成功');

                    $('#roles').datagrid('reload');
                }
                else {
                    $.messager.alert('提示', '操作失败:' + data.msg);
                    //$.messager.alert('错误', data.msg);
                }
            }, 'json');
        }
    };
</script>

<script type="text/javascript">
    var dlgUpdateRole = {
        clearUpdateRoleDialog: function () {
            $('#UpdateR_CName').val('');
            $('#UpdateR_EName').val('');
            $('#UpdateR_Description').val('');
        },

        showUpdateRoleDialog: function (row) {
            dlgUpdateRole.clearUpdateRoleDialog();

            $('#UpdateR_ID').val(row.R_ID);
            $('#UpdateR_CName').val(row.R_CName);
            $('#UpdateR_EName').val(row.R_EName);
            $('#UpdateR_Description').val(row.R_Description);
            
            $('#dlgUpdateRole').dialog('open');
        },

        updateRole: function () {
            var validate = $('#UpdateRole').form('validate');
            if (validate == false) {
                return false;
            }

            $.post('/admin/ajax/updateRole.ashx', $('#UpdateRole').serialize(), function (data) {
                if (data.state == 'ok') {
                    $.messager.alert('提示', '修改成功');

                    $('#dlgUpdateRole').dialog('close');
                    $('#roles').datagrid('reload');
                }
                else {
                    $.messager.alert('提示', '修改失败' + (data.msg ? ', ' + data.msg : ''));
                }
            }, 'json');
        },

        init: function () {
            $('#btnUpdateRole').click(dlgUpdateRole.updateRole);
            $('#dlgUpdateRole').dialog({ title: '修改角色' });
        }
    };
</script>

<%-- 分配职位 --%>
<script type="text/javascript">
    var dlgPositions = {
        clearPositionsDialog: function () {
            $('#positions').datagrid('loadData', []);
        },

        showPositionsDialog: function (row) {
            dlgPositions.clearPositionsDialog();

            $('#R_IDInPositions').val(row.R_ID);
            $('#positions').datagrid('options').url = '/admin/ajax/grid/getAllPositions.ashx';
            $('#positions').datagrid('reload', { id: row.R_ID });
            $('#dlgPositions').dialog('open');
        },

        onSetPositions: function () {
            var grid = $('#positions');
            var rows = grid.datagrid('getChecked');
            var data = {
                r_id: $('#R_IDInPositions').val(),
                p_ids: new Array()
            };
            for (var i = 0; i < rows.length; ++i) {
                data.p_ids[i] = rows[i].id;
            }

            $.post(
                '/admin/ajax/setRolePositions.ashx',
                { data: JSON.stringify(data) },
                function (d) {
                    if (d.state == 'ok') {
                        $.messager.alert('提示', '分配成功');
                        $('#dlgPositions').dialog('close');
                    }
                    else {
                        $.messager.alert('提示', '分配失败');
                    }
                },
                'json');
        },

        init: function () {
            $('#dlgPositions').dialog({ title: '分配职位' });
            $('#btnPositions').click(function () {
                dlgPositions.onSetPositions();
            });

            var grid = $('#positions');
            grid.datagrid(
                {
                    title: '职位',
                    idField: 'id',
                    columns: [[
                        { field: 'id', hidden: true },
                        { field: 'state', checkbox: true },
                        { field: 'cname', width: 100, title: '职位中文名' },
                        { field: 'ename', width: 100, title: '职位英文名' },
                        { field: 'org', width: 100, title: '所属部门' }
                    ]],

                    onLoadSuccess: function (data) {
                        grid.datagrid('clearChecked');
                        for (var i = 0; i < data.rows.length; i++) {
                            if (data.rows[i].state == true)
                                grid.datagrid('selectRecord', data.rows[i].id);
                        }
                    },
                });
        }
    };
</script>

<%-- 分配菜单权限 --%>
<script type="text/ecmascript">
    var dlgRoleMenus = {
        id: '#dlgRoleMenus',

        ShowDialog: function (r_id, row) {
            dlgRoleMenus.dlg.find('#R_IDInRoleMenus').val(r_id);
            dlgRoleMenus.dlg.find('#A_IDInRoleMenus').val(row.id);

            dlgRoleMenus.menus.tree({
                url: '/admin/ajax/tree/getMenusByApp.ashx?r_id=' + r_id +'&a_id=' + row.id,
                cascadeCheck: true,
                checkbox: true,
                dnd: false
            });

            dlgRoleMenus.dlg.dialog('open');
        },

        CheckAndShowDialog: function(r_id, row){
            if (row) {
                dlgRoleMenus.ShowDialog(r_id, row);
            } else {
                $.messager.alert('提示', '请先选择应用');
            }
        },

        OnSetRoleMenus: function () {
            var data = {
                r_id: parseInt(dlgRoleMenus.dlg.find('#R_IDInRoleMenus').val()),
                a_id: parseInt(dlgRoleMenus.dlg.find('#A_IDInRoleMenus').val()),
                menus: new Array(),
            };

            var nodes = dlgRoleMenus.menus.tree('getChecked');
            for (var i = 0; i < nodes.length; ++i) {
                if (nodes[i].attributes.type == 3) {
                    data.menus.push(nodes[i].id);
                }
            }

            $.post('/admin/ajax/setRoleMenus.ashx',
            {
                data: JSON.stringify(data)
            },
            function (result) {
                if (result.state == 'ok') {
                    $.messager.alert('提示', '操作成功');
                    dlgRoleMenus.dlg.dialog('close');
                }
                else {
                    $.messager.alert('提示', '操作失败');
                }
            }, 'json');
        },

        init: function () {
            dlgRoleMenus.dlg = $(dlgRoleMenus.id);
            dlgRoleMenus.dlg.dialog({ title: '分配角色菜单权限' });
            dlgRoleMenus.menus = $('#menus');

            dlgRoleMenus.dlg.find('#btnSetRoleMenus').click(dlgRoleMenus.OnSetRoleMenus);
        }
    }

    function loadRoleApps(i, r) {
        var grid = $('#roleApps_' + r.R_ID);
        grid.datagrid({
            title: '角色应用',
            rownumbers: true,
            singleSelect: true,
            idField: 'U_ID',
            remoteSort: false,
            url: '/admin/ajax/grid/getAllAppsByRole.ashx?id=' + r.R_ID,

            columns: [[
                { field: 'id', hidden: true },
                { title: '名称', field: 'name', width: 100 },
                { title: 'URL地址', field: 'url', width: 200 },
                { title: '简介', field: 'description', width: 200 },
            ]],

            toolbar: [{
                id: '_btnSetRoleMenu',
                text: '分配菜单权限',
                iconCls: 'icon-edit',
                handler: function () {
                    var appRow = grid.datagrid('getSelected');
                    dlgRoleMenus.CheckAndShowDialog(r.R_ID, appRow);
                }
            }]
        });

        grid.datagrid('clearSelections');
    }
</script>

<script type="text/javascript">
    function onDelete() {
        var row = $('#roles').datagrid('getSelected');
        if (row) {
            $.messager.confirm(
                "提示", "是否删除当前选择项?",
                function (r) {
                    if (r == true) {
                        $.post(
                            '/admin/ajax/deleteRole.ashx',
                            {
                                Id: row.R_ID
                            },
                            function (data) {
                                if (data.state == 'ok') {
                                    $.messager.alert('提示', '删除成功');
                                    $('#roles').datagrid('reload');
                                }
                                else
                                    $.messager.alert('提示', '删除失败');
                            }, 'json');
                    }
                });
        }
        else {
            $.messager.alert('提示', '请先选择需要删除的角色');
        }
    }
</script>

<script type="text/javascript">
    var lastExpandRow = -1;

    function doAction(action, msg) {
        var row = $('#roles').datagrid('getSelected');
        if (row) {
            action(row);
        }
        else {
            $.messager.alert('提示', msg);
        }
    }

    function initroles() {
        $('#roles').datagrid({
            singleSelect: true,
            idField: 'R_ID',
            rownumbers: true,
            url: '/admin/ajax/getRoles.ashx',
            title: '角色管理',
            view: detailview,
            height:600,

            onClickRow: function (i, r) {
                $('#roles').datagrid('expandRow', i);
            },

            detailFormatter: function (i, r) {
                return '<div style="height:200px; padding:10px;">' +
                       '<table id="roleApps_' + r.R_ID + '" style="height:200px;"></table>' +
                       '<div>';
            },

            onExpandRow: function (i, r) {
                if (lastExpandRow != -1 && lastExpandRow != i) {
                    $('#roles').datagrid('collapseRow', lastExpandRow);
                }

                loadRoleApps(i, r);

                lastExpandRow = i;
            },

            columns: [[
                { field: 'R_ID', hidden: true },
                { field: 'R_State', width: 50, title: '状态' },
                { field: 'R_CName', width: 100, title: '角色中文名' },
                { field: 'R_EName', width: 100, title: '角色英文名' },
                { field: 'R_Description', width: 400, title: '角色说明' }
            ]],

            toolbar: [{
                id: '_btnAddRole',
                text: '添加角色',
                iconCls: 'icon-add',
                handler: function () {
                    dlgAddRole.showAddRoleDialog();
                }
            }, '-', {
                id: '_btnUpdateRole',
                text: '修改',
                iconCls: 'icon-cut',
                handler: function () {
                    var action = function (row) {
                        dlgUpdateRole.showUpdateRoleDialog(row);
                    }

                    doAction(action, '请选择要修改的角色!');
                }
            }, '-', {
                id: '_btnDeleteRole',
                text: '删除',
                iconCls: 'icon-remove',
                handler: function () {
                    onDelete();
                }
            }, '-', {
                id: 'btnState',
                text: '启用/禁用',
                iconCls: 'icon-edit',
                handler: function () {
                    var action = function (row) {
                        dlgUpState.ToUpState();
                    }

                    doAction(action, '请选择要启用或禁用的角色!');
                }
            }, '-', {
                id: 'btnPermission',
                text: '分配职位',
                iconCls: 'icon-edit',
                handler: function () {
                    var action = function (row) {
                        dlgPositions.showPositionsDialog(row);
                    }

                    doAction(action, '请选择一个角色!');
                }
            }]
        });
    }

    $(function () {
        //当页面首次刷新的时候执行的事件 
        initroles();
        
        // 绑定各个dialog的关闭事件
        $('.close_dlg').each(function (i, e) {
            var dlg = $(e).attr('dlg');
            $(e).click(function () {
                $('#' + dlg).dialog('close');
            });
        });

        dlgAddRole.init();
        dlgUpdateRole.init();
        dlgPositions.init();
        dlgRoleMenus.init();
    });
</script>